<template>
	<view class="puzzle-game-wrapper">
		<view class="puzzle-game7-wrapper">
			<view class="puzzle-game7-a1">
				<view @touchstart.stop.prevent="dragstart($event, index)" @touchmove.stop.prevent="dragmove($event, index)"
				 @touchend.stop.prevent="dragend($event,index)" v-for="(item, index) in puzzleArray" :key="item.id" :id="item.id"
				 :style="item.backgroundPosition" :class="puzzleGame7Base" class="puzzle-game7-base"></view>
				<view v-show="showFlag" :style="{left:rcmoveX+'px',top:rcmoveY+'px'}" class="puzzle-game7-float">
					<view class="puzzle-game7-base" :class="puzzleGame7Base" :style="moveBackgroundPosition"></view>
				</view>
				<image v-if="countdownFlag" :src="game7Image" class="puzzle-game7-a2" :class="countdownClassName" mode=""></image>
			</view>
			<view class="puzzle-game7-a3" v-if="countdownFlag">{{seconds}} 秒后开始</view>
			<view class="puzzle-game7-a3" v-if="tipsFlag">恭喜你进入下一关</view>
		</view>
	</view>
</template>

<script>
	import Puzzle from '@/utils/puzzle.js'
	export default {
		data() {
			return {
				moveBackgroundPosition: '',//滑块位置 每次游戏开始前重置
				touchFlag: false,//是否触碰游戏区域
				rcmoveX: 0,//x坐标
				rcmoveY: 0,//y坐标
				showFlag: false,//是否限制滑块
				pauseFlag: false,//是否允许触碰 每次游戏开始前重置
				puzzleArray: [],//拼图组
				seconds:5,//游戏准备时间 每次游戏开始前重置
				countdownFlag:true,//是否显示游戏准备时间
				countdownClassName:'',//游戏准备时间放大消失样式
				tipsFlag:false,//提示
				step:1,//关卡
			};
		},
		computed:{
			game7Image:function(){
				var game7Image = require('../../static/images/puzzle/game1.png')
				if(this.step == 2){
					game7Image = require('../../static/images/puzzle/game2.png')
				}else if(this.step == 3){
					game7Image = require('../../static/images/puzzle/game2.png')
				}else if(this.step == 4){
					game7Image = require('../../static/images/puzzle/game2.png')
				}else if(this.step == 5){
					game7Image = require('../../static/images/puzzle/game2.png')
				}else if(this.step == 6){
					game7Image = require('../../static/images/puzzle/game2.png')
				}
				return game7Image
			},
			puzzleGame7Base:function(){
				var puzzleGame7Base = "puzzle-game1-base"
				if(this.step == 2){
					puzzleGame7Base = 'puzzle-game2-base'
				}else if(this.step == 3){
					puzzleGame7Base = 'puzzle-game3-base'
				}else if(this.step == 4){
					puzzleGame7Base = 'puzzle-game4-base'
				}else if(this.step == 5){
					puzzleGame7Base = 'puzzle-game5-base'
				}else if(this.step == 6){
					puzzleGame7Base = 'puzzle-game6-base'
				}
				return puzzleGame7Base
			}
		},
		mounted() {
			this.prepareGame()
		},
		methods: {
			prepareGame(){
				//关卡重置数据
				this.moveBackgroundPosition = ''
				this.pauseFlag = true
				this.puzzleArray = []
				this.seconds = 5
				this.countdownFlag = true
				this.countdownClassName = ''
				var interval = setInterval(()=>{
					if(this.seconds == 0){
						this.countdownFlag = false
						this.pauseFlag = false
						uni.$emit('countdown',{
							pauseFlag:false
						})
						clearInterval(interval)
						return
					}
					if(this.seconds == 2){
						this.countdownClassName = 'puzzle-game7-a2-unvisible'
					}
					this.seconds--
				},1000)
				let kuaiNum = {
					1:4,
					2:9,
					3:16,
					4:25,
					5:36,
					6:49
				}
				var puzzleArray = Puzzle.getPuzzleArray(kuaiNum[this.step],this.step)
				puzzleArray.forEach((item)=>{
					item.leftStart = 0
					item.leftEnd = 0
					item.topStart = 0
					item.topEnd = 0
				})
				this.puzzleArray = puzzleArray
			},
			dragstart(event, index) {
				if (this.pauseFlag) {
					return
				}
				this.touchFlag = true
				this.$nextTick(() => {
					var puzzleArray = this.puzzleArray
					puzzleArray.forEach((item) => {
						uni.createSelectorQuery().select('#' + item.id).boundingClientRect((data) => {
							item.leftStart = data.left
							item.leftEnd = data.left + data.width
							item.topStart = data.top
							item.topEnd = data.top + data.height
						}).exec()
					})
					this.puzzleArray = puzzleArray
					this.moveBackgroundPosition = puzzleArray[index].backgroundPosition
				})
			},
			dragmove(event, index) {
				if (this.pauseFlag) {
					return
				}
				if (!this.touchFlag) {
					return
				}
				var touch;
				if (event.touches) {
					touch = event.touches[0]
				}
				var puzzle = this.puzzleArray[index]
				this.rcmoveX = touch.clientX - (puzzle.leftEnd - puzzle.leftStart).toFixed(2)
				this.rcmoveY = touch.clientY - (puzzle.topEnd - puzzle.topStart).toFixed(2)
				this.showFlag = true
			},
			dragend(e, index) {
				if (this.pauseFlag) {
					return
				}
				if (!this.touchFlag) {
					return
				}
				this.showFlag = false
				this.touchFlag = false
				var pageX = e.changedTouches[0].pageX
				var pageY = e.changedTouches[0].pageY
				var puzzleArray = this.puzzleArray
				var index2 = puzzleArray.findIndex((item) => {
					if (pageX >= item.leftStart && pageX <= item.leftEnd && pageY >= item.topStart && pageY <= item.topEnd) {
						return true
					} else {
						return false
					}
				})
				if (index == index2 || index2 == -1) {
					return
				}
				var item1 = puzzleArray[index]
				var item2 = puzzleArray[index2]
				puzzleArray[index] = item2
				puzzleArray[index2] = item1
				var game1Tmp = puzzleArray.filter((item, index) => {
					if (index != item.index) {
						return true
					} else {
						return false
					}
				})
				if (!game1Tmp || game1Tmp.length == 0) {
					this.pauseFlag = true
					this.nextGmae()
				}
				this.puzzleArray = []
				this.puzzleArray = puzzleArray
			},
			nextGmae(){
				this.tipsFlag = true
				setTimeout(()=>{
					this.step++
					this.$nextTick(()=>{
						this.tipsFlag = false
					})
					this.prepareGame()
				},3000)
				
			},
		}
	}
</script>

<style>
	.puzzle-game-wrapper{
		width: 750rpx;
		height: 1520rpx;
		overflow: hidden;
	}
	.puzzle-game7-wrapper{
		position: relative;
		margin-top: 143rpx;
	}
	.puzzle-game7-a1 {
		width: 600rpx;
		margin-left: 62rpx;
		position: relative;
		border: 5rpx #FFFF00 solid;
		background-color: #FFFF00;
		overflow: hidden;
	}
	
	.puzzle-game1-base {
		width: 300rpx;
		height: 508.5rpx;
		background-image: url(../../static/images/puzzle/game1.png);
	}
	
	.puzzle-game2-base {
		width: 200rpx;
		height: 339rpx;
		background-image: url(../../static/images/puzzle/game2.png);
	}
	
	.puzzle-game3-base {
		width: 150rpx;
		height: 254.25rpx;
		background-image: url(../../static/images/puzzle/game2.png);
	}
	
	.puzzle-game4-base {
		width: 120rpx;
		height: 203.4rpx;
		background-image: url(../../static/images/puzzle/game2.png);
	}
	
	.puzzle-game5-base {
		width: 100rpx;
		height: 169.5rpx;
		background-image: url(../../static/images/puzzle/game2.png);
	}
	
	.puzzle-game6-base {
		width: 100rpx;
		height: 169.5rpx;
		background-image: url(../../static/images/puzzle/game2.png);
	}
	
	.puzzle-game7-base{
		background-size: 600rpx 1017rpx;
		float: left;
		transition: background-position 0.3s;
		border: 1rpx solid #FFFF00;
		box-sizing: border-box;
	}

	.puzzle-game7-float {
		position: absolute;
	}
	
	.puzzle-game7-a2{
		width: 600rpx;
		height: 1017rpx;
		display: block;
		position: absolute;
		opacity: 1;
		z-index: 99;
	}
	
	.puzzle-game7-a2-unvisible{
		animation: original-image 2s linear forwards;
	}
	
	@keyframes original-image{
		from{
			opacity: 1;
			transform: scale(1);
		}
		to{
			opacity: 0;
			transform: scale(2);
		}
	}
	
	.puzzle-game7-a3{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #FFFF00;
		font-size: 60rpx;
		font-weight: bold;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 100;
	}
	
</style>
